<template>
  <div class="pay-page">
    <div class="header-wrapper">
      <div class="pay-price">¥{{payPrice/100}}</div>
      <div class="desc">- 实付款金额 -</div>
      <div class="money">
        <span class="money-desc">本次消费金额：</span>
        <span class="money-price">¥{{payPrice/100}}</span>
      </div>
    </div>
    <div class="content-wrapper"></div>
    <div class="foot-wrapper">
      <span class="foot-left" @click="goOrder">继续点餐</span>
      <span class="foot-right" @click="pay">支 付</span>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {basePath} from '../api/api_const';

  export default {
    name: 'pay-page',
    data() {
      return {
        payPrice: '',
        orderNum: ''
      }
    },
    methods: {
      // 返回订单页
      goOrder() {
        this.$router.push('/order');
      },
      initPayInfo() {
        axios({
          method: 'post',
          url: basePath + 'xzg_order/query_order',
          params: {
            table_num: localStorage.getItem('tableid')
          }
        })
          .then((data) => {
            let res = JSON.parse(data.request.response).response.data;
            console.log(res);
            this.payPrice = res.title_money;
            this.orderNum = res.orderId;
            localStorage.setItem('total_amount', res.title_money);
            localStorage.setItem('out_trade_no', res.orderId);
          })
          .catch(function (err) {
            console.log(err);
          });
      },
      pay() {
        let num = '';
        for (let i = 0; i < 4; i++) {
          num += Math.floor(Math.random() * 10);
        }
        // 生成订单
        axios({
          method: 'post',
          url: basePath + 'orderPay/getq',
          data: {
            storeId: localStorage.getItem('storeid'),
            // total_amount: `${this.payPrice}`,
            // out_trade_no: `${this.orderNum}` + num
            total_amount: localStorage.getItem('total_amount'),
            out_trade_no: localStorage.getItem('out_trade_no') + num
            // 测试
            // storeId: 'v3b5c5ee587f3811e8a',
            // storeId: localStorage.getItem('storeid'),
            // total_amount: 1,
            // out_trade_no: localStorage.getItem('out_trade_no')
          }
        })
          .then((data) => {
            let res = JSON.parse(data.request.response);
            console.log(res);
            if (res.success === 'true') {
              window.location.href = res.response.data.qurl; // 跳到一码付支付
            } else {
              alert('跳转到支付失败')
            }
          })
          .catch(function (err) {
            console.log(err);
          });
      }
    },
    created() {
      this.initPayInfo();
    }
  }
</script>

<style scoped lang="scss">
  .pay-page {
    position: relative;
    width: 100%;
    height: 100%;
    .header-wrapper {
      .pay-price {
        color: #f76763;
        font-size: 28px;
        font-weight: 700;
        padding-top: 28px;
        text-align: center;
      }
      .desc {
        color: #666;
        font-size: 16px;
        text-align: center;
        padding: 4px 0 16px 0;
        border-bottom: 1px dashed #dcdcdc;
      }
      .money {
        padding: 36px 16px 18px 16px;
        font-size: 16px;
        border-bottom: 1px solid #dcdcdc;
        .money-desc {
          display: inline-block;
        }
        .money-price {
          color: #f76763;
          display: inline-block;
          float: right;
        }
      }
    }
    .foot-wrapper {
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 48px;
      font-size: 0;
      line-height: 48px;
      .foot-left {
        display: inline-block;
        width: 50%;
        font-size: 18px;
        text-align: center;
        color: #f76763;
        background: #fde6e6;
      }
      .foot-right {
        display: inline-block;
        width: 50%;
        font-size: 18px;
        text-align: center;
        color: #fff;
        background: #f76763;
      }
    }
  }
</style>
